<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入依赖的文件 -->
    <script src="../libs/jquery-1.12.4.js"></script>
    <script src="../libs/echarts.js"></script>
    <style>
        #box {
            width: 450px;
            height: 360px;
            border: 1px solid #f90;
            padding: 10px 8px 0;
        }
    </style>
</head>

<body>
    <!-- 2. 准备一个具备宽高的容器 -->
    <div id="box"></div>
    <script>
        $(function () {
            // 3. 利用 echarts.init 方法，将容器元素实例化成 echarts 对象
            let myCharts = echarts.init(document.getElementById('box'))
            // 4. 准备图表的配置项和数据
            // 图表内容、图表类型、以及图表的颜色等数据
            let option = {
                title: {
                    text: 'ECharts 柱状图'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    type: 'category',
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
                    showBackground: true, // 控制柱子的背景颜色是否显示
                    backgroundStyle: { // 控制柱子的背景颜色是什么
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            }
            // 5. 将图表的配置项数据指定给图表容器/实例
            myCharts.setOption(option)
        })
    </script>
</body>

</html>